.slidersec {
  padding: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

//等待套件載入才顯示
.mainslider {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition-delay: 1s;

  &.slick-initialized {
    visibility: visible;
    opacity: 1;
  }

  a {
    display: block;
  }

  //首頁文字動畫
  .slick-slide h1,
  .slick-slide p,
  .slick-slide .btn-more {
    transition: all 0.3s ease;
    transition-delay: 0s;
    opacity: 1;
  }

  .slick-slide.slick-current h1,
  .slick-slide.slick-cloned h1,
  .slick-slide.slick-current .btn-more,
  .slick-slide.slick-cloned .btn-more {
    animation: 10s cp-fadeInDown;
  }

  .slick-slide.slick-current p,
  .slick-slide.slick-cloned p {
    animation: 10s cp-fadeInUp;
    transition-delay: 0.8s;
  }

  .slick-arrow {
    background: transparent;
    box-shadow: $S;
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    &.slick-next {
      right: 40px;
      left: auto;
    }
    &.slick-prev {
      left: 40px;
      right: auto;
    }
    &:before {
      color: transparent;
      font-size: 20px;
    }
  }

  &:hover {
    .slick-arrow {
      background: $white;
      box-shadow: $S;
      opacity: 0.6;
      &:before {
        color: $main-blue;
      }
      &:hover {
        opacity: 1;
      }
    }
  }
}

.services-content {
  position: relative;
  padding: 0;
  background: $bg-gd-light;
  .float-top {
    position: absolute;
    z-index: 1;
    width: 60%;
    height: 126px;
    top: -48px;
    left: 50%;
    padding: 26px 57px;
    transform: translate(-50%, 0%);
    background: #ffffff;
    box-shadow: $L;
    border-radius: 130px;
    @include res(xlpc, to-mb) {
      width: 75%;
    }
    @include res(nb, to-mb) {
      padding: 26px;
      width: 95%;
      .btn-quick {
        width: 100%;
      }
    }
    @include res(xlpad, to-mb) {
      width: calc(100% - 114px);
      padding: 26px 30px;
      height: auto;
      &:lang(en) {
        width: 95%;
      }
    }
    @include res(phone, to-mb) {
      width: calc(100% - 5px);
      height: auto;
      padding: 8px 10px;
      .btn-quick {
        width: 100%;
        height: auto;
        display: block;
        text-align: center;
        .btn-icon {
          margin: 0 auto;
        }
        span {
          font-size: 12px;
          &:lang(en) {
            display: none;
          }
        }
      }
      .col-3 {
        padding: 0 5px;
      }
    }
  }
  .container {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    @supports (-webkit-touch-callout: none) {
      @include res(pad, to-mb) {
        background-position: top;
        background-attachment: initial;
        background-size: contain;
      }
    }
    .services-wrap {
      padding: 177px 0 112px;
      @include res(xlpad, to-mb) {
        padding: 100px 0 90px;
      }
      @include res(phone, to-mb) {
        padding: 137px 0 50px;
      }
      .title-wrap {
        .title {
          font-style: normal;
          font-weight: 900;
          font-size: 46px;
          letter-spacing: 0.02em;
          text-transform: uppercase;
          color: $font-black;
          text-align: center;
          span {
            color: $font-blue;
          }
        }
        .subtitle {
          font-weight: 400;
          font-size: 20px;
          letter-spacing: 0.05em;
          color: $font-black;
          margin: 8px 0 33px;
          text-align: center;
        }
      }
      @include res(xlpad, to-mb) {
        .title-wrap {
          padding-top: 20px;
          .title {
            font-size: 36px;
          }
          .subtitle {
            font-size: 18px;
          }
        }
      }
      @include res(phone, to-mb) {
        .title-wrap {
          .title {
            font-size: 30px;
          }
        }
      }
    }
  }
  .box-wrap {
    position: relative;
    padding: 48.5px 20px;
    transition: all 0.3s ease-in;
    @include res(phone, to-mb) {
      padding: 25px 20px;
    }
    .img-wrap {
      position: relative;
      width: 91px;
      height: 91px;
      margin: 0 auto;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      @include res(phone, to-mb) {
        width: 80px;
        height: 80px;
      }
      &::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        right: 0;
        bottom: -4px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: $deco1;
      }
    }
    .title {
      font-weight: 500;
      font-size: 22px;
      text-align: center;
      letter-spacing: 0.05em;
      color: $font-black;
      margin: 32px auto 14px;
      @include res(phone, to-mb) {
        font-size: 18px;
        margin: 22px auto 0px;
      }
      &::after {
        transition: opacity 0.3s ease-in;
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background: $main-blue;
        margin: 7px auto;
        opacity: 0;
      }
    }
    .content {
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      letter-spacing: 0.05em;
      color: $font-gray;
      line-height: 26px;
      &.txt-l3 {
        height: auto;
      }
      @include res(phone, to-mb) {
        font-size: 12px;
        line-height: 21px;
      }
    }
    &:hover {
      transition: all 0.3s ease-in;
      background: rgba(255, 255, 255, 0.5);
      box-shadow: $M;
      border-radius: 8px;
      .title {
        transition: opacity 0.3s ease-in;
        &::after {
          opacity: 1;
          animation: 0.6s fadeIn;
        }
      }
      svg {
        overflow: inherit;
        // 海運
        .ship {
          animation: ship-move 5s linear 2;
        }
        .wave01 {
          animation: wave-move 5s ease-in-out 2;
        }
        .wave02 {
          animation: wave-move 5s ease-in-out 0.5s 2;
        }
        // 空運
        .bag01 {
          animation: bag-move 0.5s ease-in-out;
        }
        .bag02 {
          animation: bag-move01 1s ease-in-out;
        }
        .airplane {
          animation: air-move 5s linear 2;
        }
        // 配送
        .point01 {
          animation: bag-move01 0.5s linear;
        }
        .point02 {
          animation: bag-move01 2s linear, point02 1.3s ease-in-out 2s infinite;
        }
        .line-path {
          stroke-dasharray: 300;
          stroke-dashoffset: 300;
          animation: line-path 3s linear forwards;
          animation-delay: 0.5s;
        }
        .line-path01 {
          stroke-dasharray: 300;
          stroke-dashoffset: 300;
          animation: line-path 3s linear forwards;
          animation-delay: 1.5s;
        }
        .line-path02 {
          stroke-dasharray: 300;
          stroke-dashoffset: 300;
          animation: line-path 3s linear forwards;
          animation-delay: 1.8s;
        }
        // 保稅
        .house {
          animation: house 2.5s ease forwards;
        }
        .bag03 {
          animation: bag-move 1.5s ease forwards;
        }
        .bag04 {
          animation: bag-move01 2s ease forwards;
        }
        .door {
          animation: door 2.5s ease forwards;
        }
        // 全球
        .cycle-rotate {
          animation: cycle-rotate 3s linear infinite;
          transform-origin: center;
        }

        .earth {
          animation: earth 5s linear infinite;
          transform-origin: center;
        }

        .cycle-path {
          stroke-dasharray: 6, 10, 6, 10, 6, 10, 6;
          stroke-dashoffset: -45;
          animation: cycle-path 1s linear infinite;
        }
        // 特殊
        .person01 {
          animation: person 0.8s ease forwards;
        }
        .person02 {
          animation: person 1.5s ease forwards;
        }
        .star {
          animation: star 3s ease-in-out infinite;
          transform-origin: 39px 66px;
        }
      }
    }
  }
}

.solution-content {
  position: relative;
  padding-bottom: 0;
  .title-wrap {
    padding-top: 100px;
    .title {
      font-style: normal;
      font-weight: 900;
      font-size: 46px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: $font-black;
      text-align: center;
      span {
        color: $font-blue;
      }
    }
    .subtitle {
      margin: 8px 0 63px;
      text-align: center;
      font-weight: 400;
      font-size: 20px;
      letter-spacing: 0.05em;
      color: $font-black;
      .btn-solution {
        position: absolute;
        top: calc(25% / 2);
        right: 43px;
        box-shadow: none;
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: $font-blue-gray;
        display: flex;
        justify-content: center;
        align-items: center;
        &::after {
          content: "";
          display: block;
          transition: all 0.5s ease-in-out;
          margin-left: 9px;
          position: relative;
          -webkit-mask: url(../img/more-arrow.svg) no-repeat 50% 50%;
          mask: url(../img/more-arrow.svg) no-repeat 50% 50%;
          -webkit-mask-size: cover;
          mask-size: cover;
          width: 42px;
          height: 5px;
          background-color: $font-blue-gray;
        }
        &:hover {
          color: $font-blue;
          &::after {
            transform: translateX(9px);
            background-color: $font-blue;
          }
        }
      }
      @include res(phone, to-mb) {
        .btn-solution {
          position: relative;
          right: 0;
          margin-top: 10px;
        }
      }
    }
  }
  @include res(xlpad, to-mb) {
    .title-wrap {
      padding-top: 20px;
      .title {
        font-size: 36px;
      }
      .subtitle {
        font-size: 18px;
      }
    }
  }
  @include res(phone, to-mb) {
    .title-wrap {
      .title {
        font-size: 30px;
      }
    }
  }

  .solution-wrap-slider {
    position: relative;
    margin-top: 41px;
    @include res(phone, to-mb) {
      margin: 0;
    }
    // 等待套件載入才顯示
    .solution-slider,
    .solution-nav {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
      -webkit-transition: opacity 0.3s ease;
      transition-delay: 0.1s;

      &.slick-initialized {
        visibility: visible;
        opacity: 1;
      }

      //文字動畫
      .slick-slide .title,
      .slick-slide .text-box,
      .slick-slide .btn-more,
      .slick-slide .bg,
      .slick-slide.prevdiv .text,
      .slick-slide.prevdiv .num,
      .slick-slide.nextdiv .text,
      .slick-slide.nextdiv .num {
        transition: all 0.3s ease;
        transition-delay: 0.2s;
      }

      .slick-slide.slick-current .bg .line1,
      .slick-slide.slick-current .bg .line3,
      .slick-slide.slick-cloned .bg .line1,
      .slick-slide.slick-cloned .bg .line3 {
        stroke-dasharray: 350;
        stroke-dashoffset: 300;
        animation: line 2s linear forwards;
      }
      .slick-slide.slick-current .bg .line2,
      .slick-slide.slick-cloned .bg .line2 {
        stroke-dasharray: 300;
        stroke-dashoffset: -300;
        animation: line2 2s linear forwards;
      }

      .slick-slide.slick-active .bg .pulse,
      .slick-slide.slick-current .bg .pulse {
        animation: pulse 2s infinite 2s ease-in-out;
        opacity: 0;
      }

      .slick-slide.slick-current .title,
      .slick-slide.slick-cloned .title,
      .slick-slide.prevdiv .text,
      .slick-slide.nextdiv .text {
        animation: 3s cp-fadeInDown;
      }

      .slick-slide.slick-current .text-box,
      .slick-slide.slick-cloned .text-box,
      .slick-slide.prevdiv .num,
      .slick-slide.nextdiv .num {
        animation: 3s cp-fadeInUp;
        transition-delay: 0.8s;
      }

      .slick-slide.slick-current .btn-more,
      .slick-slide.slick-cloned .btn-more {
        animation: 5s cp-fadeIn;
        transition-delay: 1s;
      }
    }

    // 上方
    .solution-slider {
      position: absolute;
      left: 19.585%;
      bottom: 0;
      z-index: 9;
      width: 60.83%;
      height: auto;
      background-color: $white;
      border-radius: 8px 8px 0px 0px;
      box-shadow: $L;
      @include res(phone, to-mb) {
        .slick-arrow {
          top: calc(25% - 20px);
        }
      }
      .slider-wrap {
        border-radius: 8px 8px 0px 0px;
        position: relative;
        display: flex;
        align-items: center;
        margin: 0 auto;
        background-color: $white;
        overflow: hidden;
        &::after {
          content: "";
          display: none;
        }
        .img {
          display: block;
          width: 50%;
          border-radius: 8px 0px 0px 0px;
          height: auto;
          .box-img {
            background-size: cover;
            border-radius: 8px 0px 0px 0px;
            &::before {
              padding-bottom: 130.82%;
            }
          }
        }
        .content {
          position: static;
          display: flex;
          width: 50%;
          padding: 0 55px;
          justify-content: center;
          flex-direction: column;
          @include res(xlpad, to-mb) {
            padding: 0 30px;
          }
          .num {
            position: absolute;
            top: -35px;
            right: 0;
            font-weight: 900;
            font-size: 180px;
            line-height: 216px;
            letter-spacing: -0.06em;
            text-transform: uppercase;
            color: $bg-light2;
            @include res(xlpad, to-mb) {
              font-size: 120px;
              line-height: 156px;
            }
          }
          .title {
            font-weight: 500;
            font-size: 24px;
            letter-spacing: 0.05em;
            color: $font-black;
            margin-top: 30px;
            margin-bottom: 30px;
            width: 100%;
            z-index: 3;
            @include res(xlpad, to-mb) {
              font-size: 18px;
              margin-top: 15px;
              margin-bottom: 15px;
            }
          }
          .text-box {
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 0.05em;
            color: $font-gray;
            width: 100%;
            z-index: 3;
            line-height: 26px;
            height: auto;
            @include res(xlpad, to-mb) {
              font-size: 12px;
              line-height: 20px;
            }
          }
        }
        .bg {
          display: block;
          position: absolute;
          bottom: 0;
          left: 50%;
        }
      }
      @include res(phone, to-mb) {
        width: 100%;
        left: 0;
        position: relative;
        .slider-wrap {
          flex-wrap: wrap;
          .img {
            width: 100%;
            height: auto;
            .box-img {
              border-radius: 8px 8px 0px 0px;
              &::before {
                padding-bottom: 65%;
              }
            }
          }
          .content {
            position: relative;
            width: 100%;
            padding: 30px 30px;
          }
          .bg {
            left: 0;
          }
        }
      }
    }

    // 下方
    .solution-nav {
      @include res(phone, to-mb) {
        display: none;
      }
      .slick-list {
        padding: 0 !important;
        .slick-track {
          display: flex;
          display: -webkit-flex;
          align-items: end;
          -webkit-align-items: flex-end;
          flex-wrap: nowrap;
          -webkit-flex-wrap: nowrap;
          justify-content: end;
          -webkit-justify-content: flex-end;
          transition-delay: 0s;
          opacity: 1;
          .slick-slide {
            // 左右兩邊文字
            &.prevdiv {
              .slider-wrap {
                position: relative;
                display: flex;
                align-items: center;
                width: 100%;
                height: auto;
                &::after {
                  content: "";
                  position: absolute;
                  display: block;
                  background: rgba(6, 24, 41, 0.61);
                  width: 100%;
                  height: 100%;
                }
                .num-wrap {
                  display: block;
                  position: absolute;
                  left: calc(0px + 41px); // 靠左0px + (按鈕一半23px + 間距18px)
                  z-index: 9;
                  width: calc(
                          59% - 82px
                  ); // 右側寬度 + (按鈕一半23px + 左右間距18px * 2)
                  .num {
                    font-weight: 300;
                    font-size: 30px;
                    letter-spacing: -0.02em;
                    text-transform: uppercase;
                    color: $white;
                    text-align: right;
                    line-height: normal;
                    @include res(pad, to-mb) {
                      font-size: 28px;
                    }
                  }
                  .text {
                    font-weight: 400;
                    font-size: 18px;
                    text-align: right;
                    letter-spacing: 0.05em;
                    color: $white;
                    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                    line-height: 1.4 !important;
                    height: auto;
                    @include res(pad, to-mb) {
                      font-size: 16px;
                    }
                  }
                }
                .img {
                  display: block;
                  width: 100%;
                  height: auto;
                  border-radius: 0;
                  .box-img {
                    border-radius: 0;
                    &::before {
                      padding-bottom: 110.52%;
                    }
                  }
                }
                @include res(phone, to-mb) {
                  .num-wrap {
                    display: none;
                  }
                }
              }
            }
            &.nextdiv {
              .slider-wrap {
                position: relative;
                display: flex;
                align-items: center;
                width: 100%;
                height: auto;
                &::after {
                  content: "";
                  position: absolute;
                  display: block;
                  background: rgba(6, 24, 41, 0.61);
                  width: 100%;
                  height: 100%;
                }
                .num-wrap {
                  display: block;
                  position: absolute;
                  right: calc(
                          0px + 41px
                  ); // 靠右0px + (按鈕一半23px + 間距18px)
                  z-index: 9;
                  width: calc(59% - 82px);
                  .num {
                    font-weight: 300;
                    font-size: 30px;
                    letter-spacing: -0.02em;
                    text-transform: uppercase;
                    color: $white;
                    text-align: left;
                    line-height: normal;
                    @include res(pad, to-mb) {
                      font-size: 28px;
                    }
                  }
                  .text {
                    font-weight: 400;
                    font-size: 18px;
                    text-align: left;
                    letter-spacing: 0.05em;
                    color: $white;
                    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                    line-height: 1.4 !important;
                    height: auto;
                    @include res(pad, to-mb) {
                      font-size: 16px;
                    }
                  }
                }
                .img {
                  display: block;
                  width: 100%;
                  height: auto;
                  border-radius: 0;
                  .box-img {
                    border-radius: 0;
                    &::before {
                      padding-bottom: 110.52%;
                    }
                  }
                }
                @include res(phone, to-mb) {
                  .num-wrap {
                    display: none;
                  }
                }
              }
            }
            .slider-wrap {
              position: relative;
              display: flex;
              width: 100%;
              height: auto;
              &::after {
                content: "";
                position: absolute;
                display: block;
                background: rgba(6, 24, 41, 0.61);
                width: 100%;
                height: 100%;
              }
              .img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 0;
                .box-img {
                  background-size: cover;
                  border-radius: 0;
                  &::before {
                    padding-bottom: 110.52%;
                  }
                }
              }
              .num-wrap {
                display: none;
              }
            }
          }
        }
      }
      .slick-arrow {
        z-index: 10;
        width: 46px;
        height: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: $white;
        box-shadow: $S;
        &.slick-next {
          left: calc(80.415% - 23px);
          right: auto;
        }
        &.slick-prev {
          left: auto;
          right: calc(80.415% - 23px); // (總寬 + 按鈕一半)
        }
        &:before {
          color: $main-blue;
          font-size: 20px;
        }
      }
      &:hover {
        .slick-arrow {
          background: $white;
          box-shadow: $S;
          opacity: 0.6;
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
}
.choose-content {
  position: relative;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  @include res(xlpad, to-mb) {
    background-position: center;
  }
  @include res(phone, to-mb) {
    background-position: right;
    .container {
      background-color: rgba(255, 255, 255, 0.8);
    }
  }
}

.contact-content {
  position: relative;
  background: $bg-light2;
  padding: 68px 0;
  text-align: center;
  &::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../img/contact-bg2.png) right no-repeat;
  }
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/contact-bg1.png) left bottom no-repeat;
  }
  .container {
    position: relative;
    z-index: 3;
    .title {
      font-weight: 900;
      font-size: 24px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: $font-black;
      @include res(phone, to-mb) {
        font-size: 30px;
      }
      span {
        color: $font-blue;
      }
    }
    .subtitle {
      font-weight: 400;
      font-size: 30px;
      letter-spacing: 0.05em;
      color: $font-black;
    }
  }
}

// 首頁why
.info-box {
  width: 50%;
  padding: 240px 0 0;
  .info-item {
    .title {
      font-style: normal;
      font-weight: 900;
      font-size: 46px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: $font-black;
      span {
        color: $font-blue;
      }
    }
    .subtitle {
      font-weight: 400;
      font-size: 20px;
      letter-spacing: 0.05em;
      color: $font-black;
      margin: 8px 0 33px;
    }
    .content {
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.05em;
      color: $font-gray;
      line-height: 26px;
      text-align: justify;
    }
  }
  @include res(xlpc, to-mb) {
    padding: 116px 0 0;
  }
  @include res(nb, to-mb) {
    width: 60%;
    padding-right: 50px;
  }
  @include res(xlpad, to-mb) {
    padding: 50px 50px 0;
    width: 65%;
    .info-item {
      .title {
        font-size: 36px;
      }
      .subtitle {
        font-size: 18px;
      }
    }
  }
  @include res(pad, to-mb) {
    padding: 50px 50px 0;
    width: 70%;
  }
  @include res(phone, to-mb) {
    padding: 50px 15px 0;
    width: 100%;
    .info-item {
      .title {
        font-size: 30px;
      }
    }
  }
}
.info-box-btn {
  padding-bottom: 240px;
  @include res(xlpc, to-mb) {
    padding-bottom: 116px;
  }
  @include res(nb, to-mb) {
    width: 60%;
    padding-right: 50px;
  }
  @include res(xlpad, to-mb) {
    padding-bottom: 50px;
    width: 65%;
  }
  @include res(pad, to-mb) {
    padding-bottom: 50px;
    width: 70%;
  }
  @include res(phone, to-mb) {
    padding-bottom: 50px;
    width: 100%;
  }
}
